<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">  <!-- 以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->  
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>校园回收柜管理系统——回收柜预约</title>
	<link rel="stylesheet" href="normalize.css">
	<link rel="stylesheet" href="common.css">
	<link rel="stylesheet" href="room_select.css">
</head>
<body>
	<!--[if lte IE8]>
	<p class="browserupdate">您的浏览器版本太老，请到<a href="http://browsehappy.com">这里</a>更新，以获取最佳的浏览体验。</p>
	<![endif]-->
	<header>
		<div class="logo">
			<img src="logo1.png" alt="南昌大学科学技术学院logo" class="logo-img vertical-center">
			<h1 class="vertical-center">校园回收柜管理系统</h1>
		</div>
		<div class="logoff">
			<a href="#"><span><em class="username">梦创未来</em>（<em class="usernum">管理员</em>）</span></a>
			<a href="login.html" id="logout"><img src="out.png" alt="注销登录"></a>
		</div>
	</header><!-- header结束 -->
	<div class="container">
		<nav class="nav-list">
			<a href="index.html" class="nav-item" id="nav-item1">
				<span class="iconfont">&#xe63e;</span>
				<span class="item-info">主页</span>
			</a>
			<a href="room_select.html" class="nav-item" id="nav-item2">
				<span class="iconfont">&#xe604;</span>
				<span class="item-info">预约回收柜</span>
			</a>
			<a href="room_register.html" class="nav-item" id="nav-item3">
				<span class="iconfont">&#xe601;</span>
				<span class="item-info">联系管理员</span>
			</a>
			<a href="cancel_reserve.html" class="nav-item" id="nav-item4">
				<span class="iconfont">&#xe64a;</span>
				<span class="item-info">取消预约</span>
			</a>
			<a href="room_release.html" class="nav-item" id="nav-item5">
				<span class="iconfont">&#xe751;</span>
				<span class="item-info">可用回收柜</span>
			</a>
			<a href="reserve_record.html" class="nav-item" id="nav-item6">
				<span class="iconfont">&#xe610;</span>
				<span class="item-info">释放回收柜</span>
			</a>
			<a href="default_record.html" class="nav-item" id="nav-item7">
				<span class="iconfont">&#xe65f;</span>
				<span class="item-info">使用记录</span>
			</a>
			<a href="notice.html" class="nav-item" id="nav-item8">
				<span class="iconfont">&#xe600;</span>
				<span class="item-info">公告栏</span>
			</a>
			<span class="triangle"></span>
		</nav>
		<div class="seat-content">
			<form class="seat-info" action="" method="post" id="seat-info">
				<div id="info1">
					<em>回收柜：</em><em id="seat_position">9-1122</em>
				</div>
				<div id="info2">
					<em>预约时间（时）：</em>
					<span class="input">
						<input type="text" id="use_time">
						<span class="triangle vertical-center">
						</span>
					</span>
					<table class="use-time-select">
						<tr>
							<td>0</td>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
							<td>5</td>
						</tr>
						<tr>
							<td>6</td>
							<td>7</td>
							<td>8</td>
							<td>9</td>
							<td>10</td>
							<td>11</td>
						</tr>
						<tr>
							<td>12</td>
							<td>13</td>
							<td>14</td>
							<td>15</td>
							<td>16</td>
							<td>17</td>
						</tr>
						<tr>
							<td>18</td>
							<td>19</td>
							<td>20</td>
							<td>21</td>
							<td>22</td>
							<td>23</td>
						</tr>
					</table>
				</div>
				<div id="info3">
					<em>预约日期（日）：</em>
					<span class="input">
					<input type="text" id="use_date">
					<span class="iconfont vertical-center">		
					</span>
					</span>
					<table class="use-date-select">
						<tr>
							<th class="date-left">
							<span>
								
							</span>
							</th>
							<th class="date-month" colspan="4">April</th>
							<th class="date-right"><span>
								
							</span>
							</th>
						</tr>
						<tr>
							<td>1</td>
							<td>2</td>
							<td>3</td>
							<td>4</td>
							<td>5</td>
						</tr>
						<tr>
							<td>6</td>
							<td>7</td>
							<td>8</td>
							<td>9</td>
							<td>10</td>
						</tr>
						<tr>
							<td>11</td>
							<td>12</td>
							<td>13</td>
							<td>14</td>
							<td>15</td>
						</tr>
						<tr>
							<td>16</td>
							<td>17</td>
							<td>18</td>
							<td>19</td>
							<td>20</td>
						</tr>
						<tr>
							<td>21</td>
							<td>22</td>
							<td>23</td>
							<td>24</td>
							<td>25</td>
						</tr>
						<tr>
							<td>26</td>
							<td>27</td>
							<td>28</td>
							<td>29</td>
							<td>30</td>
						</tr>
					</table>
				</div>
				<button id="seat_sure" class="seat-sure">确定</button>
			</form><!--  form seat-info结束 -->
			<div class="seat-map" id="seat-map"></div>
		</div>
	</div>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="common.js"></script>
	<script type="text/javascript" src="room_select.js"></script>
</body>
</html>